<!DOCTYPE html>
<html lang="zh-CN">
	<head>
		<title>明朝那些事</title>
		<meta charset="utf-8">
		<meta http-equiv="content-type" content="text/html; charset=UTF-8">
		<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
		<meta name="full-screen" content="true">
		<meta name="screen-orientation" content="landscape">
		<meta name="x5-fullscreen" content="true">
		<meta name="360-fullscreen" content="true">
		<meta http-equiv="expires" content="0">
		<meta name="format-detection" content="telephone=no">
		<meta name="wap-font-scale" content="no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-touch-fullscreen" content="yes" />
		<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
		
		<link href="https://cdn.bootcss.com/material-design-iconic-font/2.2.0/css/material-design-iconic-font.css" rel="stylesheet">
		<link href="https://cdn.bootcss.com/animate.css/3.7.0/animate.css" rel="stylesheet">
		
		<link rel="stylesheet" type="text/css" href="assets/vue-virtual-scroller.css" />
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
		<script src="assets/vue-virtual-scroller.min.js"></script>
		
		<link rel="stylesheet" type="text/css" href="assets/player.css" />
		<style>
			.scroller {
				width: 100%;
				height: 100%;
			}
		</style>
	</head>
	<body>
		
		<div id="app">
			<!-- <div class="heading">
				<h1>VueJS Audio Player V2</h1>
			</div> -->
			<div class="audioContainer">
				<a class="nav-icon" v-on:click="isPlaylistActive=!isPlaylistActive" :class="{'isActive': isPlaylistActive}" title="Music List">
					<span></span>
					<span></span>
					<span></span>
				</a>
				
				<div class="audioPlayerList" :class="{'isActive': isPlaylistActive}" 
					style="overflow: hidden; position: absolute;">
					<recycle-scroller
						class="scroller"
						:style="{'height':'32rem'}"
						:items="musicPlaylist"
						:buffer="20"
						:item-height="itemHeight">
						<div slot-scope="{ item, index, active }" class="item"
							:class="{ 'isActive':isCurrentSong(index) }" v-on:click="changeSong(index),isPlaylistActive=!isPlaylistActive">
							<p class="title">{{ item.title }}</p>
							<p class="artist">{{ item.artist }}</p>
						</div>
					</recycle-scroller>
				</div>
				
				<div class="audioPlayerUI" :class="{'isDisabled': isPlaylistActive}">
					<div class="albumImage">
						<transition name="ballmove" enter-active-class="animated zoomIn" leave-active-class="animated fadeOutDown" mode="out-in">
							<!--<transition name="slide-fade" mode="out-in">-->
							<img @load="onImageLoaded()" :src="musicPlaylist[currentSong].image" :key="currentSong" ondragstart="return false;" id="playerAlbumArt">
						</transition>
						<div class="loader" :key="currentSong">Loading...</div>
					</div>
					<div class="albumDetails">
						<transition name="slide-fade" mode="out-in">
							<p class="title" :key="currentSong">{{ musicPlaylist[currentSong].title }}</p>
						</transition>
						<transition name="slide-fade" mode="out-in">
							<p class="artist" :key="currentSong">{{ musicPlaylist[currentSong].artist }}</p>
					</div>

					<div class="playerButtons">
						<a class="button" :class="{'isDisabled':(currentSong==0)}" v-on:click="prevSong()" title="Previous Song"><i class="zmdi zmdi-skip-previous"></i></a>
						<a class="button play" v-on:click="playAudio()" title="Play/Pause Song">
							<transition name="slide-fade" mode="out-in">
								<i class="zmdi" :class="[currentlyStopped ? 'zmdi-stop' : (currentlyPlaying ? 'zmdi-pause-circle' : 'zmdi-play-circle')]" :key="1"></i>
							</transition>
						</a>
						<a class="button" :class="{'isDisabled':(currentSong==musicPlaylist.length-1)}" v-on:click="nextSong()" title="Next Song"><i class="zmdi zmdi-skip-next"></i></a>
					</div>

					<div class="currentTimeContainer" style="text-align:center">
						<span class="currentTime">{{ currentTime | fancyTimeFormat }}</span>
						<span class="totalTime"> {{ trackDuration | fancyTimeFormat }}</span>
						<!--<span style="color:black">({{ currentSong+1 }}/{{ musicPlaylist.length }})</span>-->
					</div>

					<div class="currentProgressBar">
						<div class="currentProgress" :style="{ width: currentProgressBar + '%' }"></div>
					</div>
				</div>

		</div>

	</div>

	</body>
	<script src="assets/player.js"></script>
</html>
